<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>13种CSS3图片滤镜效果</title>
	<link rel="stylesheet" href="css/demo-site.min.css">
	<!--[if IE]>
		<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<section class="demo__section">
		    <div class="demo__input-area">

		      <fieldset class="demo__option-field">
		        <legend>Choose a sample image:</legend>
		          <img class="demo__option-img" src="img/1.jpg" alt="girl image">
		          <img class="demo__option-img" src="img/atx.jpg" alt="austin image">
		          <img class="demo__option-img" src="img/tahoe.jpg" alt="tahoe image">
		          <img class="demo__option-img" src="img/bike.jpg" alt="bike image">
		          <img class="demo__option-img" src="img/lakegeneva.jpg" alt="lake geneva image">
		        <br>
		        <label class="demo__input-label">
		          Or paste in a link to your own photo:
		          <input class="demo__input-img" type="text">
		        </label>
		      </fieldset>

		      <small class="demo__note">Hovering over any of these images (or clicking on mobile) will remove the filter effect to visualize the changes.</small>
		    </div>
		    <ul class="demo__list">
		      <li class="demo__item">
		        <figure>
		          <img>
		          <figcaption>#nofilter</figcaption>
		        </figure>
		      </li>
		      <li class="demo__item">
		        <figure class="aden">
		          <img>
		          <figcaption>Aden</figcaption>
		        </figure>
		      </li>
		      <li class="demo__item">
		        <figure class="reyes">
		          <img>
		          <figcaption>Reyes</figcaption>
		        </figure>
		      </li>
		      <li class="demo__item">
		        <figure class="perpetua">
		          <img>
		          <figcaption>Perpetua</figcaption>
		        </figure>
		      </li>
		      <li class="demo__item">
		        <figure class="inkwell">
		          <img>
		          <figcaption>Inkwell</figcaption>
		        </figure>
		      </li>
		      <li class="demo__item">
		        <figure class="earlybird">
		          <img>
		          <figcaption>Earlybird</figcaption>
		        </figure>
		      </li>
		      <li class="demo__item">
		        <figure class="toaster">
		          <img>
		          <figcaption>Toaster</figcaption>
		        </figure>
		      </li>
		      <li class="demo__item">
		        <figure class="walden">
		          <img>
		          <figcaption>Walden</figcaption>
		        </figure>
		      </li>
		      <li class="demo__item">
		        <figure class="hudson">
		          <img>
		          <figcaption>Hudson</figcaption>
		        </figure>
		      </li>
		      <li class="demo__item">
		        <figure class="gingham">
		          <img>
		          <figcaption>Gingham</figcaption>
		        </figure>
		      </li>
		      <li class="demo__item">
		        <figure class="mayfair">
		          <img>
		          <figcaption>Mayfair</figcaption>
		        </figure>
		      </li>
		      <li class="demo__item">
		        <figure class="lofi">
		          <img>
		          <figcaption>Lo-fi</figcaption>
		        </figure>
		      </li>
		      <li class="demo__item">
		        <figure class="xpro2">
		          <img>
		          <figcaption>X-Pro II</figcaption>
		        </figure>
		      </li>
		      <li class="demo__item">
		        <figure class="_1977">
		          <img>
		          <figcaption>1977</figcaption>
		        </figure>
		      </li>
		      <li class="demo__item">
		        <figure class="brooklyn">
		          <img>
		          <figcaption>Brooklyn</figcaption>
		        </figure>
		      </li>
		    </ul>
		  </section>	
	<script>
    var inputField = document.querySelector(".demo__input-img")

    function pickSample(img) {
      updateImages(img.src)
      inputField.value = img.getAttribute("src")
    }

    function updateImages(src) {
      var imgs = document.querySelectorAll(".demo__item img")
      for (var i = 0; i < imgs.length; i++) imgs[i].src = src
    }

    document.addEventListener("click", function(event) {
      if (/demo__option-img/.test(event.target.className)) pickSample(event.target)
    }, false)

    inputField.addEventListener("input", function() {
      updateImages(this.value)
    }, false)

    inputField.addEventListener("focus", function() {
      this.select()
    }, false)

    pickSample(document.querySelector(".demo__option-img"))
  </script>
</body>
</html>